<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Courier New', Courier, monospace;
        }

        :root {
            --backgroundColor: #111;
            --fontSize: 24px
        }

        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }

        .shadow_modal {
            position: fixed;
            top: 0;
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.5);
            visibility: hidden;
        }

        .shadow_modal_active {
            visibility: visible;
            transition: 2s;
        }

        .sidenav {
            height: 0;
            overflow: auto;
            width: 100%;
            position: fixed;
            z-index: 1;
            background-color: var(--backgroundColor);
            color: white;
            transition: 0.5s;
        }

        .sidenav a {
            padding: 15px;
            text-decoration: none;
            font-size: var(--fontSize);
            color: white;
            display: block;
            transition: 0.3s;
        }

        .sidenav a:hover {
            color: red;
        }

        .sidenav .closebtn {
            position: absolute;
            top: 0;
            right: 10px;
            font-size: 96px;
        }

        @media screen and (max-height: 450px) {
            .sidenav {
                padding-top: 15px;
            }

            .sidenav a {
                font-size: var(--fontSize);
            }
        }
    </style>
</head>

<body>

    <!-- <div class="shadow_modal"></div> -->

    <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
        <a href="#">Other</a>

        <style>
            .accordion {
                background-color: var(--backgroundColor);
                color: white;
                cursor: pointer;
                padding: 15px;
                width: 100%;
                border: none;
                text-align: left;
                outline: none;
                font-size: var(--fontSize);
                transition: 0.5s;
            }

            .accordion:after {
                content: '\002B';
                color: white;
                font-weight: bold;
                float: right;
                margin-left: 5px;
            }

            .accordion.active:after {
                /* content: "\2212"; */
                content: "-";
            }

            .panel {
                padding: 0 18px;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.2s ease-out;
            }
        </style>
        <button class="accordion">Section 1</button>
        <div class="panel">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex
                ea commodo consequat.</p>
        </div>


        <button class="accordion">Section 3</button>
        <div class="panel">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enimore et dolorcepturi voluptate illo esse ducimus. aliqua. Ut enim
                exercitation ullamco laboris nisi uolor sit ex ea commodo consequat.</p>
        </div>


        <button class="accordion">Section 5</button>
        <div class="panel">
            <p>Lorem rem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, beataolor sit amet consectetur
                adipisicing elit. Voluptatum, beataolor sit amet Lorem ipsum dolor sit, amet consectetur adipisicing
                elit. Rerum atque itaque voluptatum facere minus illum sunt, mollitia eveniet nesciunt nemo adipisci
                magni voluptatibus dolores suscipit explicabo vero ullam eaque quia doloremque dicta at ipsam sint. Quam
                quaerat aperiam dolore saepe repellendus ex vitae sed amet modi nemo nisi, placeat ullam veniam incidunt
                necessitatibus rem, labore neque quas. Vel accusamus eaque molestias. Vero necessitatibus autem nihil
                eum officia. Tempora necessitatibus quas iste nobis obcaecati earum officiis, voluptas consectetur non
                et ab! Eum laborum pariatur, nihil quos ipsa doloribus fuga alias impedit perspiciatis consectetur
                suscipit culpa, ea aperiam quidem iure aut? Doloribus. consectetur adipisicing elit. Voluptatum, beatae.
                equat.</p>
        </div>

    </div>











    <h3 style="padding: 20px 0; text-align: center; color: rgb(128, 122, 122);"> Write By Javascript/CSS </h3>


    <header style="   display: flex; justify-content: space-around; font-size: 36px; padding: 8px;">
        <svg  onclick="openNav()"     xmlns="http://www.w3.org/2000/svg" width="36" fill="currentColor" class="bi bi-windows"
            viewBox="0 0 16 16">
            <path
                d="M6.555 1.375 0 2.237v5.45h6.555V1.375zM0 13.795l6.555.933V8.313H0v5.482zm7.278-5.4.026 6.378L16 16V8.395H7.278zM16 0 7.33 1.244v6.414H16V0z" />
        </svg>
        <b  onclick="openNav()"    >Microsoft</b>
        <span style="  cursor:pointer; " onclick="openNav()"        >&#9776;</span>
    </header>

    <script>

        window.onload = function () {
            var acc = document.querySelectorAll(".accordion");
            var i;
            // 循环绑定点击事件: 
            for (let i = 0; i < acc.length; i++) {
                acc[i].addEventListener("click", function () {
                    //  toggle 函数, 切换 active 取反
                    this.classList.toggle('active')

                    //  下个元素,  获取内容区的高度
                    let panel = this.nextElementSibling;
                    console.log("现在的容器的高度是:     " + panel.style.maxHeight);

                    // 如果内容区的高度为真,  不为空, 说明这个内容区被撑开:
                    if (panel.style.maxHeight) {
                        console.log("现在的容器的高度是:     " + panel.style.maxHeight);   // 如果容器有高度值, 那么就把它变成 null
                        panel.style.maxHeight = null;
                        console.log("  maxHeight = null,  现在的容器的高度是:     " + panel.style.maxHeight);
                    } else {
                        console.log("现在的容器的高度是 nulllll   ");
                        panel.style.maxHeight = panel.scrollHeight + "px";      // 如果容器没有高度值, 那么就把它变成 容器的高度
                        console.log("   panel.scrollHeight + ,  现在的容器的高度是:     " + panel.style.maxHeight);
                    }
                })
            }
        }


        function openNav() {
            document.getElementById("mySidenav").style.height = "100%";
            document.getElementsByClassName("shadow_modal")[0].classList.add("shadow_modal_active");
        }

        function closeNav() {
            document.getElementById("mySidenav").style.height = "0%";
            document.getElementsByClassName("shadow_modal")[0].classList.remove("shadow_modal_active");
        }

        document.getElementsByClassName("shadow_modal")[0].onclick = function (eee) {
            closeNav()
        }



    </script>









    <link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap-icons/1.8.0/font/bootstrap-icons.css"
        type="text/css" rel="stylesheet" />

    <div style="display: flex; border: 1px solid black;">
        <button style="font-size: 25px; border: none;  padding: 15px; width: 50%; border-right: 1px black solid;  "
            class="open-modal">
            <i class="bi bi-person-circle"></i>
            <span>Login</span>
        </button>
        <button style="font-size: 25px; border: none;  padding: 15px; width: 50%;  ">
            <i class="bi bi-person-plus-fill"></i>
            <span>Register</span>
        </button>
    </div>





    <style>
        .modal button {
            cursor: pointer;
            padding: 23px;
        }

        .modal {
            position: fixed;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            visibility: hidden;
            opacity: 0;
            transform: scale(1.2);
            transition: 0.3s;
            z-index: 99;
        }

        .modal .blur-box {
            -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
            position: fixed;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.3);
        }

        .modal input {
            padding: 15px;
            width: 100%;
            border: none;
            outline: none;
            border-radius: 0;
            background: rgba(28, 31, 33, .06);
            margin: 5px 0;
        }

        .show-modal {
            visibility: visible;
            transform: scale(1);
            opacity: 1;
        }

        .content-box {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 360px;
            background: white;
            padding: 12px 16px;
        }

        .close-btn {
            font-size: 35px;
            float: right;
            margin: 5px;
        }

        .close-btn:hover {
            font-weight: bold;
            cursor: pointer;
        }
    </style>

    <div class="modal">
        <div class="blur-box"></div>
        <div class="content-box">
            <span class="close-btn">&times;</span>
            <h1> Login... </h1>
            <input type="text" placeholder="username">
            <input type="password" placeholder="password">
            <button
                style="width: 100%;  padding: 12px 0; border: none; border: 1px solid black; margin-top: 12px; ">submit</button>
        </div>
    </div>
    <script>
        var open_btn = document.querySelector(".open-modal")
        var close_btn = document.querySelector(".close-btn")
        var modal = document.querySelector(".modal")
        function toggle_fun(params) {
            modal.classList.toggle("show-modal");
        }
        open_btn.addEventListener("click", toggle_fun)
        close_btn.addEventListener("click", toggle_fun)
        window.addEventListener("click", function (eee) {
            if (eee.target == modal) {
                toggle_fun();
            }
        })
    </script>







    <br><br><br>

    <h2 style="border-left: 5px solid black ;  line-height: 22px; margin-left: 12px; padding-left: 12px; ">Microsoft
        Product: </h2>
    <br><br>
    <style>
        .product {
            list-style: none;
            width: 100%;
            overflow-x: scroll;
            white-space: nowrap;
        }

        .product li {
            width: 260px;
            display: inline-block;
        }

        .product li p {
            white-space: normal;
        }

        .product li img {
            width: 100%;
            height: 160px;
        }

        .product li button {
            width: 100%;
            padding: 8px;
            border: none;
            border: 1px solid black;
            background: transparent;
        }
    </style>
    <ul class="product  clearfix">
        <li>
            <div>
                <img src="img/Tesla (10).jpeg" alt="">
                <h3>Book 6 Pro</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum dignissimos eligendi praesentium?</p>
                <button> 了解更多 </button>
            </div>
        </li>
        <li>
            <div>
                <img src="img/Tesla (11).jpeg" alt="">
                <h3>iphone 6 Pro</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum dignissimos eligendi praesentium?</p>
                <button>了解更多</button>
            </div>
        </li>
        <li>
            <div>
                <img src="img/Tesla (12).jpeg" alt="">
                <h3>xiaomi 6 Pro</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum dignissimos eligendi praesentium?</p>
                <button>了解更多</button>
            </div>
        </li>
        <li>
            <div>
                <img src="img/Tesla (13).jpeg" alt="">
                <h3>onePlus 6 Pro</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum dignissimos eligendi praesentium?</p>
                <button>了解更多</button>
            </div>
        </li>
    </ul>

    <br>
    <br>
    <br>

    <h2 style="border-left: 5px solid black ;  line-height: 22px; margin-left: 12px; padding-left: 12px; ">Microsoft
        Application: </h2>

    <br>
    <br>
    <br>

    <h2 style="border-left: 5px solid black ;  line-height: 22px; margin-left: 12px; padding-left: 12px; ">Microsoft
        Picture : </h2>


    <br>
    <br>
    <br>

    <h2 style="border-left: 5px solid black ;  line-height: 22px; margin-left: 12px; padding-left: 12px; "> Other :
    </h2>



    <div style="margin: 3px 0; clear: both;">
        <!-- ================================================================================================================= -->
        <!-- ===========================================    part 4    ================================================================== -->
        <!-- ================================================================================================================= -->
    </div>


    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }

        button {
            cursor: pointer;
            padding: 5px;
        }

        .header a {
            text-decoration: none;
            width: 50%;
            text-align: center;
        }


        body {
            width: 100vw;
            height: 100vh;
        }

        .wrap {
            width: 100%;
            height: auto;
            display: flex;
            border-radius: 12px;
            overflow: hidden;
        }

        .left {
            width: 100%;
            padding: 23px;
            line-height: 2;
        }

        .header {
            display: flex;
            position: relative;
        }

        .scroll-bar {
            /* width: 55px; */
            /*  用 js 动态设置 */
            border-bottom: 3px solid black;
            position: absolute;
            bottom: 0;
            transition: 0.3s;
        }

        .name-follow-me {
            display: flex;
            justify-content: space-between;
        }

        .name {
            font-weight: bolder;
            font-size: xx-large;
        }

        .follow-me {
            border: none;
            background: lightgreen;
            padding: 0 23px;
            margin: 15px;
            border-radius: 8px;
        }

        .contact-me span {
            font-size: 33px;
            color: blueviolet;
            margin-right: 20px;
        }

        .a-active {
            font-weight: bold;
        }

        /* 模拟隐藏  */
        section {
            height: 0;
            overflow: hidden;
        }

        .active-section {
            transition: 0.5s;
            height: auto;
        }
    </style>
    <div class="wrap">
        <!-- 左边文字 -->
        <div class="left">
            <div class="header">
                <a class="  a-active " data-rel="about-me-section">About</a>
                <a class="work-exp " data-rel="work-exp-section">Contact</a>
                <a class="History " data-rel="History-section">History</a>
                <span class="scroll-bar"></span>
            </div>
            <!-- 个人简历部分 -->
            <section class="about-me-section    active-section  ">
                <div class="name-follow-me">
                    <span class="name">jack-tom</span>
                    <button class="follow-me">follow me</button>
                </div>
                <div class="contact-me">
                    <span><i class="fab fa-weibo "></i></span>
                    <span><i class="fab fa-weibo "></i></span>
                </div>
            </section>

            <!--   工作经历 部分    -->
            <section class="work-exp-section   ">
                <div>
                    <span>java 工程师</span>
                    <div>
                        <p>2019.6 ~ 2020.12</p>
                        <p>上海腾讯有限公司</p>
                        <button>12312</button>
                    </div>
                </div>
            </section>

            <section class="History-section   ">
                <div>
                    <span> History-section </span>
                    <div>
                        <p>2019.6 ~ 2020.12</p>
                        <p> History-section </p>
                        <button>12312</button>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <script>
        function a_Click(target) {
            a_list.forEach(item => {
                item.classList.remove("a-active");    // 循环移除 a-active class  的类
                item.style = "";
            });
            target.classList.add("a-active");

            document.querySelector(".active-section").classList.remove("active-section");    // 每次点击都要 remove("active-section"); 

            // ${target.getAttribute("data-rel")} 是表达式, 获取到的是 about-me-section 
            // 相当于 document.querySelector('.about-me-section ');
            const newCurrentSection = document.querySelector(`.${target.getAttribute("data-rel")}`);
            newCurrentSection.classList.add("active-section");
            // newCurrentSection.classList.remove("not-active-section");


            let scroll_bar = document.querySelector(".scroll-bar");
            // 设置指示条为菜单项的宽度
            scroll_bar.style.width = `${target.offsetWidth}px`;
            // 设置指示条位置为菜单项的起始位置
            scroll_bar.style.left = `${target.offsetLeft}px`;
        }

        var a_list = document.querySelectorAll(".header a");
        a_list.forEach(item => {
            // 每个菜单项点击时调用事件处理函数
            item.addEventListener("click", e => a_Click(e.target));
            // 首次页面展示时，工作简介菜单是a-active的，先触发一次点击处理
            item.classList.contains("a-active") && a_Click(item);
        });
    </script>








    <div style="margin: 3px 0; clear: both;">
        <!-- ================================================================================================================= -->
        <!-- ===========================================    part-5    ================================================================== -->
        <!-- ================================================================================================================= -->
    </div>




    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .part-5 {
            font-size: 22px;
            font-weight: bold;
        }

        .part-5 .part_5_accordion {
            background-color: #eee;
            color: #444;
            cursor: pointer;
            width: 100%;
            height: 70px;
            line-height: 70px;
            padding-left: 20px;
            border: none;
            text-align: left;
            outline: none;
            transition: 0.4s;
        }

        .part-5 .active,
        .part-5 .part_5_accordion:hover {
            background-color: #ccc;
        }

        .part-5 .part_5_accordion:after {
            content: '';
            color: #777;
            font-weight: bold;
            float: right;
            position: relative;
            top: 15px;
            right: 36px;
            background-image: url();
            display: inline-block;
            /* background: lightblue; */
            width: 36px;
            height: 36px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 50%;
            -webkit-transform: rotate(180deg) translateZ(0);
            transform: rotate(180deg) translateZ(0);
            -webkit-transition: all .3s ease-out;
            transition: all .3s ease-out;
        }

        .part-5 .active:after {
            transform: rotate(0deg) translateZ(0);
        }

        .part-5 .panel {
            padding: 0 18px;
            background-color: white;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
        }
    </style>

    <div class="part-5">
        <p class="part_5_accordion" onclick="toggle_this(this)">Section 1</p>
        <div class="panel">
            <div>
                地址： 北京市朝阳区光华东里8号中海广场3号楼17层 <br>
                电话： 010-5902-0655 <br>
                传真： 010-5977-2620
            </div>
        </div>


        <p class="part_5_accordion" onclick="toggle_this(this)">Section 1</p>
        <div class="panel">
            <p>Lorem ipsum dolor sit amet, consectetur . Ut .</p>
        </div>


        <p class="part_5_accordion" onclick="toggle_this(this)">Section 1</p>
        <div class="panel">
            <p>Lorem ipsum dolor sit amet, consectetur . .</p>
        </div>
    </div>


    <script>

        function toggle_this(eee) {
            var part_5_accordionsss = document.querySelectorAll(".part_5_accordion");
            // 循环绑定点击事件: 
            for (let i = 0; i < part_5_accordionsss.length; i++) {
                if (part_5_accordionsss[i] == eee) {
                    eee.classList.toggle('active');
                    //  下个元素,  获取内容区的高度
                    let panel = eee.nextElementSibling;
                    console.log("现在的容器的高度是:     " + panel.style.maxHeight);

                    // 如果内容区的高度为真,  不为空, 说明这个内容区被撑开:
                    if (panel.style.maxHeight) {
                        console.log("现在的容器的高度是:     " + panel.style.maxHeight);   // 如果容器有高度值, 那么就把它变成 null
                        panel.style.maxHeight = null;
                        console.log("  maxHeight = null,  现在的容器的高度是:     " + panel.style.maxHeight);
                    } else {
                        console.log("现在的容器的高度是 nulllll   ");
                        panel.style.maxHeight = panel.scrollHeight + "px";      // 如果容器没有高度值, 那么就把它变成 容器的高度
                        console.log("   panel.scrollHeight + ,  现在的容器的高度是:     " + panel.style.maxHeight);
                    }
                } else {
                    part_5_accordionsss[i].nextElementSibling.style.maxHeight = null;
                    part_5_accordionsss[i].classList.remove('active');
                }
            }
        }
    </script>





<br><br><br><br><br>
    <!-- ================================================================================================================ -->
    <!-- ================================================================================================================ -->
    <!-- ================================================================================================================ -->

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }

        .part-6 header {
            width: 100%;
            position: sticky;
            top: 0px;
        }

        .part-6 img {
            width: 96%;
        }

        .part-6 .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

        .part-6 header:before {
            content: "";
            position: absolute;
            z-index: -1;
            background-color: rgba(255, 255, 255, 0.22);
            -webkit-backdrop-filter: blur(11px);
            backdrop-filter: blur(11px);
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .part-6 header ul ul {
            display: none;
            position: absolute;
            padding: 10px;
            border-radius: 8px;
            top: 70px;
            width: 200%;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.22);
        }

        .part-6 header ul ul b {
            padding: 0px 20px;
            display: block;
        }

        .part-6 header ul ul b:hover {
            background: #0B62D2;
            border-radius: 8px;
        }

        .part-6 header ul {
            display: flex;
            justify-content: space-around;
            font-size: 20px;
            font-weight: bolder;
        }

        .part-6 header ul li {
            /* 重要 */
            line-height: 60px;
            height: 60px;
            width: 33.33%;
            text-align: center;
            position: relative;
        }

        .part-6 .active {
            display: block;
        }

        .part-6 .one-level ul {
            display: block;
        }
    </style>
    <div class="part-6">
        <header>
            <ul>
                <li class="header_li " onclick="openLi(this)">Apple
                    <ul class="second_menu   active">
                        <b onclick="b_click()">iPhone SE2</b>
                        <b onclick="b_click()">MacBook Pro</b>
                        <b onclick="b_click()">iPad mini 5</b>
                    </ul>
                </li>
                <li class="header_li " style="border-left: 1px solid darkgray;border-right: 1px solid darkgray; "
                    onclick="openLi(this)">Microsoft
                    <ul class="second_menu">
                        <b onclick="b_click()">Surface Laptop</b>
                        <b onclick="b_click()">Laptop Studio</b>
                        <b onclick="b_click()">Microsoft 365</b>
                    </ul>
                </li>
                <li class="header_li " onclick="openLi(this)">Tesla</li>
            </ul>
        </header>

        <img src="img/Tesla (11).jpeg" alt="">
        <img src="img/Tesla (12).jpeg" alt="">
        <img src="img/Tesla (13).jpeg" alt="">
        <img src="img/Tesla (18).jpeg" alt="">
        <img src="img/Tesla (16).jpeg" alt="">
    </div>
    <script>

        function toggle_active(eee, action) {
            for (var i = 0; i < eee.length; i++) {
                if (eee[i].nodeName === "UL" && eee[i].classList.contains("second_menu")) {
                    if (action == "remove") {
                        eee[i].classList.remove('active')
                    }
                    if (action == "toggle") {
                        eee[i].classList.toggle('active')
                    }
                }
            }
        }
        function openLi(eee) {
            let header_li = document.getElementsByClassName("header_li");
            for (let i = 0; i < header_li.length; i++) {
                if (eee == header_li[i]) {
                    toggle_active(header_li[i].childNodes, "toggle")
                } else {
                    toggle_active(header_li[i].childNodes, "remove")
                }
            }
        }
        function b_click(ee) {
            var ev = ee || window.event;
            if (ev && ev.stopPropagation) {
                //非IE浏览器
                ev.stopPropagation();
            } else {
                //IE浏览器(IE11以下)
                ev.cancelBubble = true;
            }
        }
    </script>








    <h1 style="font-size: 161px;">&#9776;</h1>
    <h1 style="font-size: 161px;">&Tilde; ~ <h1>
            <h1 style="font-size: 161px;">&times; <h1>


</html>